import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Modal, Button, message, Typography } from 'antd';
import PateoTable from '@/components/common/PateoTable';
import PateoSearchForm from '@/components/common/PateoSearchForm';
import PateoAuthButtons from '@/components/common/PateoAuthButtons';
import Separate from '@/components/Separate';
import styles from '@/components/common/PateoTable/TableList.less';
import { routerRedux } from 'dva/router';
import textVar from '../textVar';

const mapStateToProps = (state: any) => ({
  listData: state?.orderManagement?.pageData,
  loading: state.loading.effects['orderManagement/postFetchPage'],
  permissions: state?.menu?.permissions,
});

class index extends Component {
  state = {
    rightQuery: {},
    type: [],
    brand: [],
  };
  searchRef = null;
  payloadUrl = '/optshop/m18/goods/queryOrderList';
  payloadType = 'orderManagement/postFetchPage';

  componentDidMount() {
    this.getList();
    // this.setBrand();
  }

  getList = () => {
    // 获取数据
    const { rightQuery } = this.state;
    this.postAxios(rightQuery);
    // const { dispatch } = this.props;
    // dispatch({
    //   type: this.payloadType,
    //   payload: { url: this.payloadUrl, ...rightQuery },
    // });
  };
  // 重置品牌
  setBrand = () => {
    this.searchRef.resetFields(['brandId', 'carType']);
    this.props.dispatch({
      type: 'commodityManagement/getData',
      payload: {
        url: '/common/vehicle/getcurrentbrand',
      },
      callback: (res: any) => {
        const { statusCode, data } = res;
        if (statusCode === '0') {
          this.setState({
            brand: data.map(e => ({
              label: e.brandName,
              value: e.brandCode,
            })),
          });
        }
      },
    });
  };
  // 重置车型
  setType = () => {
    this.searchRef.resetFields(['carType']);
    this.setState({ type: [] });
    const brandId = this.searchRef.getFieldValue('brandId');
    // const seriesId = this.searchRef.getFieldValue('seriesId');
    brandId &&
      //   seriesId &&
      this.props.dispatch({
        type: 'vehicleInfoQuery/getDataWithRes',
        payload: {
          url: '/common/vehicle/gettypelist',
          brandId,
          //   seriesId,
        },
        callback: e => {
          const { statusCode, data } = e;
          if (statusCode === '0') {
            this.setState({
              type: data.map(e => ({
                label: e.name,
                value: e.code,
              })),
            });
          }
        },
      });
  };
  postAxios = (rightQuery: any) => {
    const { dispatch } = this.props;
    const {pageSize,current} = rightQuery
    const page = current?{page:{pageSize,current}}:{}
    
    dispatch({
      type: this.payloadType,
      payload: { url: this.payloadUrl, ...rightQuery,...page },
    //   callback: (res: any) => {
    //     const { statusCode, data } = res || {};
    //     if (statusCode === '0') {
    //       this.setState(data);
    //     }
    //   },
    });
  };
  render() {
    const { rightQuery, type, brand } = this.state;
    const {
      loading,
      location: { pathname = '/' },
      listData: { m18OrderList, pagination, orderGatherVo },
    } = this.props;
    const searchItems = [
    //   {
    //     type: 'select',
    //     title: `品牌`,
    //     key: 'brandId',
    //     selectOptions: brand,
    //     onChange: () => {
    //       this.setType();
    //     },
    //   },
    //   {
    //     type: 'select',
    //     title: `车型`,
    //     key: 'carType',
    //     selectOptions: type,
    //   },
      {
        type: 'select',
        title: `订单状态`,
        key: 'status',
        selectOptions: textVar.status,
        keyValue:['key',"value"]
      },
    //   {
    //     type: 'select',
    //     title: `商品平台`,
    //     key: 'platform',
    //     selectOptions: textVar.platform,
    //   },
      {
        type: 'select',
        title: `订单来源`,
        key: 'orderSource',
        selectOptions: textVar.orderSource,
        keyValue:['key',"value"]
      },
      {
        type: 'input',
        title: `搜索框`,
        key: 'searchWord',
        maxLength: 20,
      },
    ];

    const rightColumns = [
      {
        title: `编号`,
        dataIndex: 'id',
      },
      {
        title: `父级订单号`,
        dataIndex: 'parentNo',
      },
      {
        title: `商品订单号`,
        dataIndex: 'orderNo',
      },
      {
        title: `原始支付金额`,
        dataIndex: 'oriFee',
      },
      {
        title: `实际支付金额`,
        dataIndex: 'payFee',
      },
      {
        title: `商品SKUID`,
        dataIndex: 'skuId',
      },
      {
        title: `商品SKU名称`,
        dataIndex: 'skuName',
      },
      {
        title: `车辆VIN号`,
        dataIndex: 'vin',
      },
    //   {
    //     title: `车辆品牌`,
    //     dataIndex: 'dfBrand',
    //   },
    //   {
    //     title: `车系`,
    //     dataIndex: 'carSeries',
    //   },
    //   {
    //     title: `车型`,
    //     dataIndex: 'carType',
    //   },
      {
        title: `订单来源`,
        dataIndex: 'orderSource',
        render: (i: number) => {
          return textVar.textFn(i, 'orderSource');
        },
      },
      {
        title: `订单状态`,
        dataIndex: 'status',
        render: (i: number) => {
          return textVar.textFn(i, 'status');
        },
      },
      {
        title: `订单明细`,
        dataIndex: '订单明细',
        fixed: 'right',
        width: 100,
        render: (text: any, record: any) => {
          const btns = [
            {
              title: '订单详情',
              key: 'detail',
              auth: 'orderManagement_info',
              onConfirm: () => {
                const { dispatch } = this.props;
                dispatch(
                  routerRedux.push({
                    pathname: '/commodity/orderManagement/orderManagementDetail',
                    record,
                  }),
                );
              },
            },
          ];
          return <PateoAuthButtons btns={btns} max={2} pathname={pathname} />;
        },
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => <span>共&nbsp;{!pagination ? 0 : pagination.total}&nbsp;条</span>,
    };

    const rightTable = {
      columns: rightColumns,
      dataSource: [...(m18OrderList || [])],
      loading,
      rowKey: (record: any) => {
        return record.orderNo
      },
      pagination: paginationProps,
      scroll: { x: 'max-content' },
    };
    const { prepareOrders = 0, curDayOrders = 0, curMonOrders = 0 } = orderGatherVo || {};
    const separateList = [
      {
        title: `${prepareOrders}个`,
        text: '待发货订单统计',
      },
      {
        title: `${curDayOrders}个`,
        text: '当日交易成功订单数统计',
      },
      {
        title: `${curMonOrders}个`,
        text: '本月交易成功订单数统计',
      },
    ];
    return (
      <div>
        <Card>
          <Separate list={separateList}></Separate>
        </Card>
        <Card className={styles.standardTable}>
          <PateoSearchForm
            searchItems={searchItems}
            fetchParams={{ type: this.payloadType, url: this.payloadUrl }}
            saveFormValues={(val: any) => this.setState({ rightQuery: { ...rightQuery, ...val } })}
            handleFormReset={() => this.setState({ rightQuery: {}, type: [] })}
            onRef={e => {
              this.searchRef = e.current;
            }}
          />
        </Card>
        <Card className={styles.standardTable}>
          <PateoTable
            extraHandle={true}
            tableProps={rightTable}
            fetchParams={{ type: this.payloadType, url: this.payloadUrl }}
            formValues={rightQuery}
            dispatchFn={this.postAxios}
          />
        </Card>
      </div>
    );
  }
}

export default connect(mapStateToProps)(index);
